<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../layui/css/layui.css?v=1" media="all">
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="0">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script src="../../layui/layui.js?v=1" charset="utf-8"></script>
    <script src="../../js/config.js?v=1"></script>
    <script src="../../js/public.js?v=1"></script>
    <script src="../../js/function.js?v=1"></script>
    <link rel="stylesheet" href="../../css/public.css?v=1">
    <link rel="stylesheet" href="../../css/patient/list.css?v=1">
</head>
<body>
<div class="container" style="min-width: 900px">
    <div class="search-box">
        <div class="table-title">
            <p>搜索</p>
            <!--<div class="table-title-right">
                <a href="javascript:;" class="search-show">普通搜索<img src="../../img/sanjiao_lanse.png"></a>
            </div>-->
        </div>
        <div class="search-main">
            <form class="layui-form" id="searchForm">
                <div class="search-main-left">
                    <div class="layui-form-item">
                        <label class="layui-form-label">姓名/编号/手机号</label>
                        <div class="layui-input-inline">
                            <input class="layui-input" name="code" type="text" lay-verify="search_name" lay-verType="tips" placeholder="请输入患者姓名/编号/手机号">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">性别</label>
                        <div class="layui-input-inline">
                            <select name="sex">
                                <option value="">请选择</option>
                                <option value="0">男</option>
                                <option value="1">女</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="search-main-center">
                    <div class="layui-form-item search-date">
                        <label class="layui-form-label">年龄</label>
                        <div class="layui-input-inline">
                            <input class="layui-input" lay-verify="search_age" lay-verType="tips" name="age_from" type="text" placeholder="请输入">
                            <span><i class="layui-icon layui-icon-right"></i></span>
                            <input class="layui-input" lay-verify="search_age" lay-verType="tips" name="age_to" type="text" placeholder="请输入">
                            <div class="clear"></div>
                        </div>
                    </div>
                    <div class="layui-form-item search-date">
                        <label class="layui-form-label">加入管理时间</label>
                        <div class="layui-input-inline">
                            <input class="layui-input" name="created_from" type="text" placeholder="请选择开始日期" id="start_time">
                            <span><i class="layui-icon layui-icon-right"></i></span>
                            <input class="layui-input" name="created_to" type="text" placeholder="请选择终止日期" id="ent_time">
                            <div class="clear"></div>
                        </div>
                    </div>
                </div>
                <div class="search-main-right">
                    <button type="button" lay-submit="" lay-filter="search-btn">搜索</button>
                    <a href="javascript:;" class="reset-btn">[清空]</a>
                </div>
            </form>
            <div class="clear"></div>
        </div>
    </div>
    <div class="table-body">
        <div class="table-title">
            <p>患者列表</p>
            <div class="table-title-right">
                <a href="./V1_1/add.html">
                    <button><i class="layui-icon layui-icon-addition"></i>新增患者</button>
                </a>
            </div>
        </div>
        <table class="layui-table" lay-even lay-skin="nob" style="border-top:1px solid #cccccc;margin:0;" id="list-table">

            <!--<tr>
                <th>编号</th>
                <th>患者姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>诊断标签</th>
                <th>首次干预手段</th>
                <th>加入管理日期</th>
                <th>手术时间</th>
                <th>最近就诊日期</th>
                <th>问卷完成度</th>
                <th>访视记录</th>
            </tr>-->
            <tbody id="dataList">
            <!--<tr>
                <td><a href="./patient_info.html">M0000001</a></td>
                <td>
                    <div>
                        <img src="../../img/patient_username.png">
                        <p>张小小</p>
                    </div>
                    <div>
                        <img src="../../img/patient_phone.png">
                        <p>15203730120</p>
                    </div>
                </td>
                <td>30</td>
                <td>男</td>
                <td>tsh瘤</td>
                <td></td>
                <td>2020-05-30</td>
                <td>2020-05-20</td>
                <td>2020-05-30</td>
                <td>90%</td>
                <td>
                    <div>
                        <a href="./fangshi.html">
                        <img src="../../img/chakan.png">
                        <p>查看</p>
                        </a>
                    </div>
                </td>
            </tr>
            <tr>
                <td>M0000001</td>
                <td>
                    <div>
                        <img src="../../img/patient_username.png">
                        <p>张小小</p>
                    </div>
                    <div>
                        <img src="../../img/patient_phone.png">
                        <p>15203730120</p>
                    </div>
                </td>
                <td>30</td>
                <td>男</td>
                <td>tsh瘤</td>
                <td></td>
                <td>2020-05-30</td>
                <td>2020-05-20</td>
                <td>2020-05-30</td>
                <td>90%</td>
                <td>
                    <div>
                        <img src="../../img/chakan.png">
                        <p>查看</p>
                    </div>
                </td>
            </tr>-->
            </tbody>
        </table>
        <div id="pages"></div>
    </div>
    <!--<div class="pages-box">
        <div class="pages-box-right">
            <p>到第</p>
            <input type="text">
            <p>页</p>
            <button>前往</button>
        </div>
        <div class="layui-box layui-laypage layui-laypage-default">
            <a style="border-left:none;">末页</a>
        </div>
        <div class="pages" id="pages"></div>
        <div class="layui-box layui-laypage layui-laypage-default">
            <a style="border-right:none;">首页</a>
        </div>
        <div class="clear"></div>
    </div>-->
</div>
</body>
<script>
    $(document).ready(function () {
        layui.use(['element', 'form', 'layer', 'laydate', 'laypage','table'], function () {
            var element = layui.element;
            var form = layui.form;
            var layer = layui.layer;
            var laydate = layui.laydate;
            var laypage = layui.laypage;
            var table = layui.table;

            var lists = '';
            //筛选开始时间
            laydate.render({
                elem: '#start_time',
            });

            //筛选结束时间
            laydate.render({
                elem: '#ent_time',
            });

            // v1.1 信息校验
            form.verify({
                search_name: function(value){
                    if(!new RegExp("(^$)|^[\u4e00-\u9fa5a-zA-Z-z0-9]+$").test(value)){
                        return '只允许输入数字、字母或汉字';
                    }
                    if(value.length > 20){
                        return '最多只能输入20个字';
                    }
                },
                search_age: function(value){
                    if(!new RegExp("(^$)|^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$").test(value)){
                        return '只能输入正数';
                    }
                    if(parseInt(value) >= 1000){
                        return '最多只能输入5位数字';
                    }
                },
            });


            //搜索
            var params = {};
            form.on('submit(search-btn)',function(data){
                params = data.field;
                var created_from = params.created_from.replace(/-/g,'');
                var created_to = params.created_to.replace(/-/g,'');

                if(params.age_from != '' && isNaN(params.age_from)){

                        layer.msg('请输入有效的开始年龄',{icon:5,time:1500});
                        return false;

                }
                if(params.age_to != ''){
                    if(isNaN(params.age_to)){
                        layer.msg('请输入有效的终止年龄',{icon:5,time:1500});
                        return false;
                    }
                    if(params.age_to < params.age_from){
                        layer.msg('请输入有效的终止年龄',{icon:5,time:1500});
                        return false;
                    }
                }
                if(params.created_from !== '' && params.created_to !== ''){
                    if(created_from > created_to){
                        layer.msg('开始日期不能大于终止日期',{icon:5,time:1500});
                        return false;
                    }
                }
                params.hosp_id = getLocalStorage('hosp_id');
                params.dept_id = getLocalStorage('dept_id');
                console.log(params);
                //getListData(params);
                ajax_get(configUrl.patientList,params,(res)=>{
                    console.log(res);
                    initPageList(res.data.total[0],1);
                });
            })

            //清空搜索
            $('.reset-btn').click(function(){
                $('#searchForm')[0].reset();
                params = {};
                params.hosp_id = getLocalStorage('hosp_id');
                params.dept_id = getLocalStorage('dept_id');
                //getListData(params);
                ajax_get(configUrl.patientList,params,(res)=>{
                    console.log(res);
                    initPageList(res.data.total[0],1);
                });
            })

            $('.search-show').click(function () {
                $('.search-main').slideToggle(500, function () {
                    if ($('.search-main').css('display') == 'block') {
                        $('.search-show img').css('transform', 'rotate(180deg)');
                    } else {
                        $('.search-show img').css('transform', 'rotate(360deg)');
                    }
                });
            });
            function initPageList(count,curr_page){
                laypage.render({
                    elem: 'pages',
                    count: count,
                    curr:curr_page,
                    prev: '《',
                    next: '》',
                    first: '首页',
                    last: '末页',
                    jump:function(obj){
                        //params.page_no = obj.curr;
                        //getListData(params);
                        params.hosp_id = getLocalStorage('hosp_id');
                        params.dept_id = getLocalStorage('dept_id');
                        params.page_no = obj.curr;
                        getListData(params);
                    },
                });
            }


            ajax_get(configUrl.patientList,{hosp_id:getLocalStorage('hosp_id'),dept_id:getLocalStorage('dept_id')},(res)=>{
                initPageList(res.data.total[0],1);
            });
            //首次进入获取数据
            //
            //动态表格
            function getListData(params){
                ajax_get(configUrl.patientList,params,(res)=>{
                    console.log(res);
                    if(res.status == 0){
                        //$('#dataList').empty();
                        lists = res.data;
                        var listsTmp = [];
                        $.each(lists.data,function(index,item){
                            //str = '{'+"user_id:"+item.user_id+'"name"'+item.name+'}';
                            var tips = '';
                            if(item.ct_type_names.length>0){
                                tips = item.ct_type_names.join('、');
                            }
                            str = {
                                "user_id":'<a href="javascript:;" onclick="jumpInfo('+index+')">'+item.bar_code+'</a>',
                                "name":'<div><img src="../../img/patient_username.png"><p>'+item.name+'</p></div><div><img src="../../img/patient_phone.png"><p>'+item.cell+'</p></div>',
                                "age":item.age,
                                'sex':item.sex == 1?'女':'男',
                                'tips':tips,
                                'ganyu_at':item.gy_names[0],
                                'create_at':item.created_at,
                                'shoushu_at':item.su_date,
                                'visit_at':item.created_at,
                                'complete_per':Math.round(item.complete_per)+'%',
                                'fangshi':'<div><a href="javascript:;" onclick="jumpInfo('+index+')"><img src="../../img/chakan.png"><p>问卷详情</p></a></div>'
                            };
                            listsTmp.push(str)
                        });
                        table.render({
                            elem: "#list-table",
                            //cellMinWidth: 90,
                            cols: [[ //标题栏
                                // {field: 'user_id', title: '编号',width:110},
                                {field: 'name', title: '患者姓名',minWidth:120},
                                {field: 'age', title: '年龄',width:80},
                                {field: 'sex', title: '性别',width:80},
                                {field: 'tips', title: '诊断标签'},
                                {field: 'ganyu_at', title: '首次干预手段'},
                                {field: 'create_at', title: '加入管理日期'},
                                {field: 'shoushu_at', title: '手术时间'},
                                {field: 'visit_at', title: '最近就诊日期'},
                                {field: 'complete_per', title: '问卷完成度'},
                                {field: 'fangshi', title: '问卷详情',minWidth: 90},
                            ]]
                            ,data: listsTmp
                            ,page:false
                            ,even: true
                            ,count:200
                        });
                    }else{
                        layer.msg(res.msg,{icon:5,time:1500},function(){});
                    }
                })
            }
            jumpInfo = function(index){
                var patient_info = lists.data[index];
                saveLocalStorage('patient_id',patient_info.user_id);
                saveLocalStorage('patient_name',patient_info.name);
                //设置病历管理的面包屑导航
                var mianbaoxieSex = '';
                if(patient_info.sex == 1){
                    mianbaoxieSex = '女';
                }else{
                    mianbaoxieSex = '男';
                }
                var iframe_title = '<a class="mianbaoxie" href="javascript:;" data-href="./patient/list.html" data-title="病例管理"><p style="color:#4777E7;display: inline;">病历管理</p></a> / '+patient_info.name+' | '+mianbaoxieSex+' | '+patient_info.age+'岁';
                $('body',parent.document).find('#iframe-title').html(iframe_title);
                window.location.href='./V1_1/patient_info.html';
            }
            fangshi = function(patient_id){
                saveLocalStorage('patient_id',patient_id);
                window.location.href='./fangshi.html';
            }
        });
    });


</script>
</html>
